<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
        <link rel="stylesheet" href="message.css">
        <style>
            /* 非组件样式 */
            .btn{
                margin-right:20px;
            }
            .p40{
                padding:40px;
            }
            .mt20{
                margin-top:20px;
            }
        </style>
    </head>
    <body>
        <div class="p40">
            <p>点击调用提示</p>
            <button class="btn btn-success">成功提示</button>
            <button class="btn btn-danger">失败提示</button>
            <button class="btn btn-warning">警告提示</button>
            <button class="btn btn-info">信息提醒</button>
        </div>
       

        <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
        <script src="message.min.js"></script>
        <script>
            $(function(){
                $('.btn-success').on('click',function(){
                    $.message('成功');
                })
                $('.btn-danger').on('click',function(){
                    $.message({
                        message:'失败提示',
                        type:'error',
                        onClose:function(){
                            alert(1111);
                        }
                    });
                })
                $('.btn-warning').on('click',function(){
                    $.message({
                        message:'警告提示',
                        type:'warning'
                    });
                })
                $('.btn-info').on('click',function(){
                    $.message({
                        message:'信息提醒',
                        type:'info'
                    });
                })
                
            })
        </script>
    </body>
</html>